
<template>
  <div>
        <Card>
            <div slot="title" >
                <Button v-if='btnp.sblxing_xzfl' @click="handleClickAddForm" class="zh-hollow" type="primary" icon="plus-round">新增父类</Button>
            </div>
            <Form :model="formItem" :label-width="80">
                <Row :gutter="10" type="flex"  align="middle"  >
                    <Col span="8">
                        <FormItem label="设备-父类">
                            <Input v-model="formItem.equipName" placeholder="父类名称" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem label="设备-子类">
                            <Input v-model="formItem.nName" placeholder="子类名称" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="新增时间">
                            <DatePicker v-model="timeRange" format="yyyy-MM-dd HH:mm" type="datetimerange" placement="bottom-end" placeholder="请选择开始和结束时间"></DatePicker>
                        </FormItem>
                    </Col>                
                </Row>
                <Row :gutter="10" >
                    <Col span="8" offset="16"  style="text-align:right;">
                        <Button @click="searchGetTable" class="zh-hollow" type="primary" icon="ios-search-strong">搜索</Button>
                    </Col>                    
                </Row>
            </Form>
        </Card>
        <Card style="margin-top:10px;" :padding="0">
            <Table :loading="loading" border :columns="columns" :data="data"></Table>
            <Page 
                :current.sync="formItem.pageNumber"  
                :total="total" 
                show-total 
                show-sizer 
                @on-change="pageChange" 
                @on-page-size-change="pageSizeChange"></Page>
        </Card>
        <Modal 
            :title="supperClassTitle" 
            v-model="modal_editsupClass"
            ok-text="保存" 
            cancel-text="放弃操作"
            :loading='supLoad'
            @on-ok='saveSup'
        >
            <Form :label-width="60" style="padding:15px 30px;">
                <FormItem label="父类名称">
                    <Input v-model="supName"></Input>
                </FormItem>
            </Form>    
        </Modal>
        <Modal  :title="supName+'-查看子类'" v-model="modal_viewSub"  class="zh-modal-form no_footer_modal">
            <Card>
                <div slot="title" >
                    <Button @click="handleClickAddSub" class="zh-hollow" type="primary" icon="plus-round">新增子类</Button>
                </div>
                <Table  border :columns="subColumns" :data="subData"></Table>
                <div style="paddingRight:30px;">
                    <Page 
                        :current.sync="subPageNumber"  
                        :total="subTotal" 
                        show-total 
                        :page-size="subPageSize"
                        @on-change="subPageChange"></Page>
                </div>
                
            </Card>
        </Modal>
        <Modal 
            :title="subClassTitle" 
            v-model="modal_subClass" 
            ok-text="保存" 
            cancel-text="放弃操作"
            :loading='subLoad'
            @on-ok="saveSub"
        >
            <Form  :label-width="60" style="padding:15px 30px;">
                <FormItem label="父类名称">
                    <Input readonly v-model="supName"></Input>
                </FormItem>
                <FormItem label="子类名称">
                    <Input  v-model="subName"></Input>
                </FormItem>
            </Form>    
        </Modal>
  </div>
</template>

<script>
import util from '@/libs/util.js'
import {getTypeEquipTable,getSubType} from '@/libs/get.js'
import {saveSupType,deleteSupType,saveSubType,deleteSubType} from '@/libs/post.js'
export default {
    name:'',
    data () {
        return {
            subTotal:0,
            supLoad:true,
            subLoad:true,
            subName:'',
            subUuid:'',
            subPageSize:8,
            subPageNumber:1,
            supUuid:'',
            supName:'',
            user_type:'',
            userUuid:'',
            btnp:{},
            btn:{
                sblxing_xzfl:false,
                sblxing_bjfl:false,
                sblxing_scfl:false,
                sblxing_ckzl:false
            },
            subColumns:[
                {
                    key:'name',
                    title:'子类名称'
                },{
                    key:'action',
                    title:'操作',
                    render:(h,params)=>{
                        return h('div',[
                             h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#2D8CF0'
                                },
                                on:{
                                    click:()=>{
                                        this.modal_subClass=true;
                                        this.subClassTitle="编辑子类名称";
                                        this.subName=params.row.name;
                                        this.subUuid=params.row.uuid;
                                    }
                                }
                            },'编辑'),
                            h('Button',{
                                props:{
                                type:'text',
                                size:'small'
                                },
                                style:{
                                color:'#EA0000'
                                },
                                on:{
                                click:()=>{
                                    let config={
                                    title:'删除子类',
                                    content:'类型删除后不可恢复。',
                                    okText:'删除',
                                    cancelText:'放弃操作',
                                    onOk:()=>{
                                        this.deleteSub(params.row.uuid)
                                    }
                                    }
                                    this.$Modal.confirm(config)
                                }
                                }
                            },'删除')
                        ])
                    }
                }
            ],
            subData:[
                {
                    name:'对讲面板'
                },
                {
                    name:'对讲主机'
                },
            ],
            modal_viewSub:false,
            subClassTitle:'',
            modal_subClass:false,
            modal_editsupClass:false,
            supperClassTitle:'',
            loading:true,
            total:0,
            timeRange:[],
            formItem:{
                equipName:'',
                nName:'',
                pageNumber:1,
                pageSize:10,
            },
            columns:[
                {
                    key:'name',
                    title:'父类名称',
                    minWidth:150
                },
                {
                    key:'nname',
                    title:'子类名称',
                    minWidth:150
                },
                {
                    key:'time',
                    title:'新增时间',
                    minWidth:150,
                    align:'center'
                },
                {
                key:'action',
                title:'操作',
                align:'center',
                minWidth:200,
                fixed:'right',
                render:(h,params)=>{
                    //判断是否显示某些操作按钮
                    return h('div',[
                    h('Button',{
                        props:{
                        type:'text',
                        size:'small'
                        },
                        style:{
                        color:'#2D8CF0',
                        display:this.btnp.sblxing_xzfl?'inline-block':'none'
                        },
                        on:{
                            click:()=>{
                                this.modal_editsupClass=true;
                                this.supperClassTitle="编辑父类名称";
                                this.supName=params.row.name;
                                this.supUuid=params.row.uuid;
                            }
                        }
                    },'编辑父类'),
                    h('Button',{
                        props:{
                        type:'text',
                        size:'small'
                        },
                        style:{
                        color:'#EA0000',
                        display:this.btnp.sblxing_scfl?'inline-block':'none'
                        },
                        on:{
                        click:()=>{
                            let config={
                            title:'删除父类',
                            content:'删除父类，将同时删除该父类下的子类，删除后不可恢复。',
                            okText:'删除',
                            cancelText:'放弃操作',
                            onOk:()=>{
                                this.deleteSup(params.row.uuid)
                            }
                            }
                            this.$Modal.confirm(config)
                        }
                        }
                    },'删除父类 '),          
                    h('Button',{
                        props:{
                        type:'text',
                        size:'small'
                        },
                        style:{
                        color:'#2D8CF0',
                        display:this.btnp.sblxing_ckzl?'inline-block':'none'
                        },
                        on:{
                            click:()=>{
                                this.supUuid=params.row.uuid;
                                this.supName=params.row.name;
                                this.getSubTable(params.row.uuid);
                            }
                        }
                    },'查看子类'),
                    ])
                }
                }
                
            ],
            data:[]   
        };
    },
    methods:{
        async saveSub(){
            if(this.subName.length<=0||this.subName==null||this.subName==''){
                this.$Notice.error({
                    desc:"请输入子类名称"
                })
            }else{
                let parentids=this.supUuid;
                let uuid=this.subUuid;
                let name=this.subName;
                let res= await saveSubType({ uuid, name, parentids});
                let response=res.data;
                if(response.code==200){
                    this.$Notice.success({
                        desc:'已保存'
                    });
                    this.subPageNumber=1;
                    this.getSubTable(this.supUuid);
                    this.modal_subClass=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
            let that=this;
            this.subLoad=false;
            setTimeout(()=>{
                that.subLoad=true;
            },500) 
        },
        async saveSup(){
            if(this.supName.length<=0||this.supName==null||this.supName==''){
                this.$Notice.error({
                    desc:"请输入父类名称"
                })
            }else{
                let uuid=this.supUuid;
                let name=this.supName;
                let res= await saveSupType({uuid,name});
                let response=res.data;
                if(response.code==200){
                    this.$Notice.success({
                        desc:'已保存'
                    });
                    this.searchGetTable();
                    this.modal_editsupClass=false;
                }else{
                    this.$Notice.error({
                        desc:response.msg
                    })
                }
            }
            let that=this;
            this.supLoad=false;
            setTimeout(()=>{
                that.supLoad=true;
            },500) 
        },
        async deleteSup(uuid){
            let res= await deleteSupType(uuid);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:'已删除'
                });
                this.searchGetTable();
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        async deleteSub(uuid){
            let res= await deleteSubType(uuid);
            let response=res.data;
            if(response.code==200){
                this.$Notice.success({
                    desc:'已删除'
                });
                this.subPageNumber=1;
                this.getSubTable(this.supUuid);
            }else{
                this.$Notice.error({
                    desc:response.msg
                })
            }
        },
        searchGetTable(){
            this.formItem.pageNumber=1;
            this.getTable();
        },
        async getSubTable(uuid){
            let res=await getSubType(uuid,this.subPageNumber,this.subPageSize);
            let response=res.data;
            if(response.code===200){
                this.subTotal=response.data.total;
                this.subData=response.data.rows;
                this.modal_viewSub=true;
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
                
            }
        },
        subPageChange(number){
            this.subPageNumber=number;
            this.getSubTable(this.supUuid);
        },
        async getTable(){
            this.loading=true;
            let form=JSON.parse(JSON.stringify(this.formItem));
            if(!!this.timeRange[0]&&this.timeRange.length>0){
                form.startTime=util.time1(this.timeRange[0]);
                form.endTime=util.time1(this.timeRange[1]);
            }
                
            let res=await getTypeEquipTable(form);
            let response=res.data;
            if(response.code===200){
                this.total=response.data.total;
                this.data=response.data.rows.map(item=>{
                    item.time=item.created.slice(0,16);
                    return item
                })
                this.loading=false;
            }else{
                this.$Notice.error({
                    desc:response.msg
                });
                
            }
        },
        pageSizeChange(size){
            //回到第一页
            this.formItem.pageNumber=1;
            this.formItem.pageSize=size;
            this.getTable();
        },
        pageChange(number){
            this.formItem.pageNumber=number;
            this.getTable();
        },
        handleClickAddForm(){
            this.modal_editsupClass=true;
            this.supperClassTitle="新增父类";
        },
        handleClickAddSub(){
            this.modal_subClass=true;
            this.subClassTitle="新增子类";
        }
    },
    watch:{
        modal_editsupClass:function(){
            if(!this.modal_editsupClass){
                this.supUuid='';
                this.supName='';
            }
        },
        modal_subClass:function(){
            if(!this.modal_subClass){
                
                this.subUuid='';
                this.subName='';
            }
        },
        modal_viewSub:function(){
            if(!this.modal_viewSub){
                this.supUuid='';
                this.supName='';
            }
        },
    },
    created(){
        util.isCustomer(this);
        this.btnp=util.bpower(this,this.btn);
        this.getTable();
    }
}

</script>
<style lang='scss' >
</style>